Dom文档对象模型[Web前端][JavaScript]

Dom文档对象模型[Web前端]

四种获取html元素的方法

  1. 用Id获取元素的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
			function check(){
			var username = document.getElementById("username");
			var usernameMsg = document.getElementById("usernameMsg");
			var emailMsg = document.getElementById("emailMsg");
			var passworldMsg = document.getElementById("passwordMsg");
			var repassworldMsg = document.getElementById("repasswordMsg");
<tr align="center">
</script>
					
					
<td colspan="">用户名:</td>
<td align="left"><input type="text" name="" id="username" onblur="checkUsername(this)"/>
<font color="red" id="usernameMsg"></font>
</<script type="text/javascript">
			function check(){
			var username = document.getElementById("username");
			var usernameMsg = document.getElementById("usernameMsg");
			var emailMsg = document.getElementById("emailMsg");
			var passworldMsg = document.getElementById("passwordMsg");
			var repassworldMsg = document.getElementById("repasswordMsg");
<tr align="center">
</script>
					
					
<td colspan="">用户名:</td>
<td align="left"><input type="text" name="" id="username" onblur="checkUsername(this)"/>
<font color="red" id="usernameMsg"></font>
</td>
  1. 通过标签名
1
2
3
4
5
6
7
document.getElementsByTagName("div");
console.log(div);

var div = documents.getElementsByTagName("span");
//调用div对象的所有(span)子元素,返回的都是数组。
var arr1 = div.getElementsByTagName("span");
console.document.getElementsByTagName("div");
console.log(div);

var div = documents.getElementsByTagName("span");
//调用div对象的所有(span)子元素,返回的都是数组。
var arr1 = div.getElementsByTagName("span");
console.log(arr1);
  1. 通过类名，调用元素
1
2
3
4
5
<div class = "two">
</div>

var arr1 = document.getElementsByClassName("two");
console.<div class = "two">
</div>

var arr1 = document.getElementsByClassName("two");
console.log(arr1);
  1. 通过Name属性
1
2
var arr1 = document.getElementsByName("last");
console.var arr1 = document.getElementsByName("last");
console.log(arr1);